<!--
 * @Author: 陈 娇
 * @Date: 2021-10-11 15:48:30
 * @LastEditTime: 2022-02-18 16:08:48
 * @LastEditors: Please set LastEditors
 * @Description: 申诉管理
 * @FilePath: \工作项目\ebc-admin\src\views\report\Appeal.vue
-->

<template>
  <div>
    <!-- 列表 -->
    <tab-list
      ref="list"
      :searchs="searchs"
      :list-hedar="listHeader"
      :api-function="apiFunction"
      @init-params="initParams"
    >
      <span
        slot="appealState"
        slot-scope="scope"
        :style="`color: ${
          scope.value.appealState === '1'? '#67C23A' : '#F56C6C'
        }`"
      >
        {{
          scope.value.appealState === "0" ? "处理中": 
          scope.value.appealState === "1"? "成功": "失败"
        }}
      </span>
      <span slot="appealType" slot-scope="scope">
        {{ scope.value.appealType == "1" ? "个人申述" : "组织申述" }}
      </span>
      <template slot="operat" slot-scope="scope">
        <el-button v-if="scope.value.appealState == '0'" type="text" size="small" @click="auditBox(scope.value, true)">审核</el-button>
        <el-button type="text" size="small" @click="auditBox(scope.value, false)">申述详情 </el-button>
      </template>
    </tab-list>
    <!-- 审核弹窗 -->
    <el-dialog
      title="申述审核"
      v-if="appealBox"
      :visible.sync="appealBox"
      width="50%"
    >
      <text-list :text-list="textLists" :detail-info="detailInfo" />
      <span slot="footer" class="dialog-footer" v-show="isShow">
        <el-button @click="refuseBtn(false)">拒 绝</el-button>
        <el-button type="primary" @click="examination(true)">同 意</el-button>
      </span>
      <span slot="footer" class="dialog-footer" v-show="isShow === false">
        <el-button type="primary" @click="appealBox = false">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 审核拒绝 -->
    <el-dialog
      titile="申诉审核"
      v-if="refuseBox"
      :visible.sync="refuseBox"
      width="30%"
    >
      <edit-form
        ref="form"
        :rules="rules"
        :edit-list="editList"
        :form="form"
        @on-submit="refuseAuth(false, form.reason)"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="refuseBox = false">取 消</el-button>
        <el-button type="primary" @click="$refs.form.ruleFrom()"
          >确 认</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 组件
import tabList from "@/components/admin/tab-list.vue";
import textList from "@/components/admin/text-list.vue";
import editForm from "@/components/admin/edit-form.vue";
// 数据封装
import {
  listHeader,
  searchs,
  textLists,
  editList,
  rules,
} from "./config/appeal.config.js";
// 接口
import {
  appealList,
  appealAuditBox,
  reportDetails,
  reportReasonList,
  appealAudit,
} from "@/api/report.js";
// 公共方法
import { asyncApiFun } from "@/utils/utils.js";
export default {
  name: "appeal",
  components: {
    tabList,
    textList,
    editForm,
  },
  data() {
    return {
      listHeader,
      searchs,
      textLists,
      editList,
      params: {},
      detailInfo: {}, //审核弹窗数据
      rules,
      apiFunction: appealList,
      appealBox: false, //申述弹窗标识
      refuseBox: false, //拒绝审核弹窗标识
      datailBox: false, //举报、申述详情弹窗标识
      form: {}, //拒绝弹窗数据
      bizId: "", //业务ID标识
      isShow: false, //动态展示审核弹窗底部按钮
      // imgArr: [],    //申述图片
      // imgArr2: [],   //举报图片
    };
  },
  methods: {
    // 审核弹窗
    async auditBox({ appealId, reportId }, state) {
      this.isShow = state;
      this.appealBox = true;
      this.bizId = appealId;
      const [res] = await asyncApiFun(appealAuditBox, appealId);
      
      if (reportId !== null && reportId !== "") {
        
        const [res2] = await asyncApiFun(reportDetails, reportId);
        
        this.detailInfo = Object.assign(res.data,res2.data)
        if (res2.data && res2.data.reportPicture)
          this.detailInfo.reportPicture = this.detailInfo.reportPicture.split(',');
          
        } else {
          
          this.detailInfo = res.data;
        }
      
      if (this.detailInfo.appealImages) this.detailInfo.appealImages = this.detailInfo.appealImages.split(',')
    
      this.textLists.forEach((item) => {
        if (item.key == "appealType") {
          this.detailInfo[item.key] = item.valHandle(res.data);
        }
      });
    },
    //审核通过
    async examination(operation) {
      this.appealBox = false;
      const _param = {
        operation,
        appealId: this.bizId,
      };
      const [res] = await asyncApiFun(appealAudit, _param);
      if (res) {
        this.$message.success(`${operation ? "已通过审核" : "已拒绝审核"}`);
        this.$refs.list.getList();
      }
    },
    // 审核拒绝弹窗
    refuseBtn() {
      this.refuseBox = true;
    },
    // 审核拒绝
    async refuseAuth(operation, reason) {
      const params = {
        operation,
        appealId: this.bizId,
      };
      if (reason) params.reason = reason;
      const [res] = await asyncApiFun(appealAudit, params);
      if (res) {
        this.$message.success(`${operation ? "已通过审核" : "已拒绝审核"}`);
        this.appealBox = false;
        this.refuseBox = false;
        this.$refs.list.getList();
      }
    },
    // 举报原因
  //  async getReason(){
  //     const _params = {
  //       type:'0'
  //     }
  //     const [res] =await asyncApiFun(reportReasonList,_params)
  //     console.log(res)
  //   },

    // 初始化列表请求参数
    initParams(param) {
      this.params = param;
    },
  },
};
</script>

<style>
.img-flex{
  display: flex;
  height: 200px;
  justify-content: space-around;
}

</style>